<template>
  <div class="conter">
    <div class="btns">
      <el-button
        type="primary"
        icon="el-icon-plus"
        circle
        @click="centerDialogVisible = true"
      />
    </div>
    <div class="div_conters">
      <div class="div_top">
        <span v-if="istrue" @click="istrue=false">{{ datas.title }}</span>
        <el-input v-else v-model="datas.title" type="text" @blur="istrue=true" />

      </div>
      <div class="conters">
        <div class="div_left">
          <div @drop="drop" @dragover.prevent @click="delform(datarr[0])">
            <img
              v-if="datarr[0].img"
              :src="datarr[0].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
          <div @drop="drop1" @dragover.prevent>
            <img
              v-if="datarr[1].img"
              :src="datarr[1].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
          <div @drop="drop2" @dragover.prevent>
            <img
              v-if="datarr[2].img"
              :src="datarr[2].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
        </div>
        <div class="div_main">
          <div @drop="drop3" @dragover.prevent>
            <img
              v-if="datarr[3].img"
              :src="datarr[3].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
          <div @drop="drop4" @dragover.prevent>
            <img
              v-if="datarr[4].img"
              :src="datarr[4].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
        </div>
        <div class="div_right">
          <div @drop="drop5" @dragover.prevent>
            <img
              v-if="datarr[5].img"
              :src="datarr[5].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
          <div @drop="drop6" @dragover.prevent>
            <img
              v-if="datarr[6].img"
              :src="datarr[6].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
          <div @drop="drop7" @dragover.prevent>
            <img
              v-if="datarr[7].img"
              :src="datarr[7].img"
              alt=""
              width="100%"
              height="100%"
            >
          </div>
        </div>
      </div>
    </div>
    <div class="lefts">
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        height="80%"
        center
      >
        <div ref="shadowRef">
          <div
            v-for="item in list"
            :key="item.index"
            class="list"
            draggable="true"
            @dragstart="moslist($event, item)"
          >
            <img :src="item.img" alt="" width="100%" height="100%">
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="formtrue"
      width="30%"
      height="80%"
      center
    >
      <el-form

        :model="form"

        class="login-form"
      >
        <el-form-item label="时间间隔">
          <el-input
            v-model="form.time"

            placeholder="时间间隔"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.remake"

            placeholder="备注"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        time: 0,
        remake: ''
      },
      istrue: true,
      formtrue: false,
      centerDialogVisible: false,
      datarr: [
        { img: '' },
        { img: '' },
        { img: '' },
        { img: '' },
        { img: '' },
        { img: '' },
        { img: '' },
        { img: '' }
      ],
      datas: {
        title: '标题'
      },
      arr: '',
      arr1: '',
      arr1: '',
      itemVals: null,
      list: [
        { img: require('../../../assets/datascree/a1.png') },
        { img: require('../../../assets/datascree/a2.png') },
        { img: require('../../../assets/datascree/a3.png') },
        { img: require('../../../assets/datascree/a4.png') },
        { img: require('../../../assets/datascree/a5.png') },
        { img: require('../../../assets/datascree/a6.png') },
        { img: require('../../../assets/datascree/a7.png') },
        { img: require('../../../assets/datascree/a8.png') }
      ]
    }
  },
  methods: {
    delform(val) {
      if (val) {
        this.formtrue = true
      }
    },
    drop(event) {
      if (this.itemVals) {
        this.datarr[0] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop1(event) {
      if (this.itemVals) {
        this.datarr[1] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop2(event) {
      if (this.itemVals) {
        this.datarr[2] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop3(event) {
      if (this.itemVals) {
        this.datarr[3] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop4(event) {
      if (this.itemVals) {
        this.datarr[4] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop5(event) {
      if (this.itemVals) {
        this.datarr[5] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop6(event) {
      if (this.itemVals) {
        this.datarr[6] = this.itemVals
        this.centerDialogVisible = true
      }
    },
    drop7(event) {
      if (this.itemVals) {
        this.datarr[7] = this.itemVals
        this.centerDialogVisible = true
      }
    },

    moslist(e, itemVal) {
      this.itemVals = itemVal
      const shadowDiv = this.$refs.shadowRef
      shadowDiv.style.left =
        shadowDiv.offsetLeft - shadowDiv.offsetWidth / 2 + 'px'
      shadowDiv.style.top =
        shadowDiv.offsetTop - shadowDiv.offsetHeight / 2 + 'px'
      shadowDiv.style.zIndex = 1
      this.centerDialogVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

::v-deep  .lefts{
.el-dialog {
  margin: 0;
}

}
.btns {
  height: 40px;
  width: 100%;
  text-align: right;
}
.div_conters {
  display: grid;
  height: calc(100% - 60px);
  grid-template-rows: 60px auto;
  border: 1px #00bcd4 solid;

  .div_top {
    width: 100%;
    height: 60px;
    display: grid;
    place-content: center;
  }
  .conters {
    width: 100%;
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: 10px;
    overflow: hidden;
    div {
      overflow: hidden;
    }
    .div_left {
      width: 100%;
      height: 100%;

      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-row-gap: 10px;
      div {
        border: 1px #00bcd4 solid;
      }
    }
    .div_right {
      width: 100%;
      height: 100%;

      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-row-gap: 10px;
      div {
        border: 1px #00bcd4 solid;
      }
    }
    .div_main {
      width: 100%;
      height: 100%;

      display: grid;
      grid-template-rows: 2fr 1fr;
      grid-row-gap: 10px;
      div {
        border: 1px #00bcd4 solid;
      }
    }
  }
}

.conter {
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
.list {
  width: 100%;
  height: 100px;

  margin-top: 10px;
}
.list1 {
  width: 100%;
  height: 100%;
}
</style>
